<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/303988 (zh-CN, DDL); Windows/10.0.14393 (Win64);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="407"/>

<div>
<span><div><span style="font-size: 21px;">任何插件的使用都要经历以下三步：</span></div><div>1）安装插件：npm</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>npm install --save gulp-htmlmin</div></div><div>PS：可一次性安装多个插件，插件间用空格隔开</div><div><br/></div><div>2）引包：require()</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var htmlmin = require('gulp-htmlmin')<br/></div></div><div><br/></div><div>3）使用：pipe()</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>gulp.task('htmlmin',function(){</div><div>   gulp.src('src/html/*.html')</div><div>     .pipe(htmlmin())</div><div>     .pipe(gulp.dest('dist/html'));</div><div>});</div></div><div><br/></div><div><br/></div><div><span style="font-size: 21px;">htmml压缩 ：gulp-htmlmin</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>//参数</div><div>var opt = {</div><div>  removeComments: true,//清除HTML注释</div><div>  collapseWhitespace: true,//压缩HTML</div><div>  collapseBooleanAttributes: true,//省略布尔属性的值 &lt;input checked=&quot;true&quot;/&gt; ==&gt; &lt;input checked /&gt;</div><div>  removeEmptyAttributes: true,//删除所有空格作属性值 &lt;input id=&quot;&quot; /&gt; ==&gt; &lt;input /&gt;</div><div>  removeScriptTypeAttributes: true,//删除&lt;script&gt;的type=&quot;text/javascript&quot;</div><div>  removeStyleLinkTypeAttributes: true,//删除&lt;style&gt;和&lt;link&gt;的type=&quot;text/css&quot;</div><div>  minifyJS: true,//压缩页面JS</div><div>  minifyCSS: true//压缩页面CSS</div><div>};</div><div><br/></div><div>//带参数使用</div><div>gulp.src('src/html/*.html')</div><div>   .pipe(htmlmin(opt))</div><div>   .pipe(gulp.dest('dist/html'));</div></div><div><br/></div><div><span style="font-size: 21px;">css压缩：gulp-clean-css</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>//参数</div><div>var opt = {</div><div>  advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]</div><div>  compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]</div><div>  keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]</div><div>  keepSpecialComments: '*'</div><div>  //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀</div><div>}</div><div><br/></div><div>//带参数使用</div><div>gulp.src('src/css/*.css')</div><div>  .pipe(cssmin(opt))</div><div>  .pipe(gulp.dest('dist/css'));</div></div><div><br/></div><div><span style="font-size: 21px;">js压缩：gulp-uglify</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>//参数：</div><div>var opt = {</div><div>  //mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字</div><div>  mangle:true, //是否修改变量名(混淆)（类型：Boolean，默认：true）</div><div>  compress: true,//类型：Boolean 默认：true 是否完全压缩</div><div>  preserveComments: 'all' //保留所有注释</div><div>}</div><div><br/></div><div>//带参数使用<br/></div><div>gulp.task('jsmin', function () {</div><div>  gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])</div><div>    .pipe(uglify(opt))</div><div>    .pipe(gulp.dest('dist/js'));</div><div>});</div></div><div><br/></div><div><span style="font-size: 21px;">合并文件：gulp-concat</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>//参数</div><div>var opt = {</div><div>  newLine: ';'  //在合并文件前加入字符</div><div>}</div><div><br/></div><div>//带参数使用</div><div>gulp.src('src/js/*.js')</div><div>  .pipe(concat('all.js',opt))//all.js为合并后的文件名</div><div>  .pipe(gulp.dest('dist/js'));</div></div><div><br/></div><div><span style="font-size: 21px;">文件重命名：gulp-rename</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>//参数</div><div>var opt = {</div><div>  dirname: &quot;main/text/ciao&quot;,//子目录名</div><div>  basename: &quot;aloha&quot;,//文件名</div><div>  prefix: &quot;bonjour-&quot;,//前缀</div><div>  suffix: &quot;-min&quot;,//后缀名</div><div>  extname: &quot;.js&quot;//扩展名</div><div>}</div><div><br/></div><div>//带参数使用</div><div>gulp.src('src/js/index.js')</div><div>  .pipe(rename({ suffix: &quot;-min&quot;}))</div><div>  .pipe(gulp.dest('dist/js'));</div></div><div><br/></div><div><span style="font-size: 21px;">压缩图片文件：gulp-imagemin</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><br/></div></div><div><br/></div><div><span style="font-size: 21px;">js语法检测：gulp-jshint</span></div><div>侦测javascript代码中错误和潜在问题的工具</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><br/></div></div><div><br/></div><div><span style="font-size: 21px;">文本替换：gulp-replace</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><br/></div></div><div><br/></div><div><br/></div><div><span style="font-size: 21px;">编译 Less：gulp-less</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>gulp.src(['src/styles/*.less', '!src/styles/_*.less'])</div><div>    .pipe(less())</div><div>    .pipe(gulp.dest('dist/styles'))</div></div><div><br/></div><div><span style="font-size: 21px;">编译Sass: gulp-sass</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>gulp.task('sass', function () {</div><div>  return gulp.src('./sass/**/*.scss')</div><div>    .pipe(sass.sync().on('error', sass.logError))</div><div>    .pipe(gulp.dest('./css'));</div><div>});</div><div><br/></div><div>//参数</div><div>var opt = {outputStyle: 'compressed'}</div></div><div>outputStyle有四种取值分别为：nested(默认），expanded，compact，compressed。</div><div><br/></div><div><br/></div><div><span style="font-size: 21px;">浏览器同步测试：browser-sync</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var browserSync = require('browser-sync');</div><div>gulp.task('serve', function() {</div><div>  browserSync({</div><div>    server: {</div><div>      baseDir: ['dist']</div><div>    },</div><div>  }, function(err, bs) {</div><div>    console.log(bs.options.getIn([&quot;urls&quot;, &quot;local&quot;]));</div><div>  });</div><div><br/></div><div>  gulp.watch('src/styles/*.less',['style']);</div><div>  gulp.watch('src/scripts/*.js',['script']);</div><div>  gulp.watch('src/images/*.*',['image']);</div><div>  gulp.watch('src/*.html',['html']);</div><div>});</div></div><div><br/></div><div>创建本地服务器：gulp-connect</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var gulp = require('gulp'),</div><div>  connect = require('gulp-connect');</div><div><br/></div><div>gulp.task('connect', function() {</div><div>  connect.server();</div><div>});</div></div><div><br/></div></span>
</div></body></html> 